<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>自定义表单复制</title>
    <#include "/pubHeadStyle.html">
    <script src="${ctx}/extends/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<form class="layui-form" action="" lay-filter="formData" style="padding-top:5px;">
            <input type="hidden" name="formDefId" id="formDefId" value="${bpmFormDef.formDefId}" class="layui-input"/>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label" style="width: auto">原表单名称: </label>
                    <div class="layui-input-inline">
                        <input type="text" name="oldFormName" value="${bpmFormDef.subject}" class="layui-input" placeholder="原表单名称" readonly/>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label" style="width: auto">新表单名称:<span style="color:red;">*</span></label>
                    <div class="layui-input-inline">
                        <input type="text" name="formName" id="formName" class="layui-input" autocomplete="off" lay-verify="required" placeholder="新表单名称" onblur="autoGetFormDefName(this)"/>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label" style="width: auto">原表单别名: </label>
                    <div class="layui-input-inline">
                        <input type="text" name="oldFormKey" value="${bpmFormDef.formKey}" class="layui-input" placeholder="原表单别名" readonly/>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label" style="width: auto">新表单别名:<span style="color:red;">*</span></label>
                    <div class="layui-input-inline">
                        <input type="text" name="formKey" id="formKey" class="layui-input" autocomplete="off" lay-verify="required" placeholder="新表单别名" />
                    </div>
                </div>
            </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label" style="width: auto">原表单类型: </label>
            <div class="layui-input-inline">
                <input type="text" name="oldTypeName" value="${bpmFormDef.typeName}" class="layui-input" placeholder="原表单类型" readonly/>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label" style="width: auto">新表单类型:</label>
            <div class="layui-unselect layui-form-select downpanel" style=" position: absolute;top:5%;left:109px;width: 190px;">
                <div class="layui-select-title">
                    <span class="layui-input layui-unselect" id="treeclass"
                          style="color:#000;line-height: 35px;"></span>
                    <input type="hidden" name="selectID" value="0">
                    <i class="layui-edge"></i>
                </div>
                <dl class="layui-anim layui-anim-upbit" style="width: 180px;max-height: 140px">
                    <dd>
                        <ul id="classtree"></ul>
                    </dd>
                </dl>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label" style="width: auto">原表单描述: </label>
            <div class="layui-input-inline">
                <input type="text" name="oldFormDesc" value="${bpmFormDef.formDesc}" class="layui-input" placeholder="原表单描述" readonly/>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label" style="width: auto">新表单描述:<span style="color:red;">*</span></label>
            <div class="layui-input-inline">
                <input type="text" name="formDesc" id="formDesc" class="layui-input" autocomplete="off" lay-verify="required" placeholder="新表单描述"/>
            </div>
        </div>
    </div>
    <div class="layui-btn-container" style="position: absolute;bottom: 0;left: 41%;">
        <p class="layui-btn" id="saveButton" lay-submit lay-filter="save">保存</p>
        <button class="layui-btn layui-btn-danger" id="return">取消</button>
    </div>
</form>
<style>
    #formData{
        height: 300px;
        overflow-y: auto;
    }
</style>
<script>
    var setter;
    var commons;
    layui.config({
        base: serverPath.formPath + staticPath.formPath //静态资源所在路径
    }).extend({
        index: 'index' //主入口模块
    }).use(['index','layer', 'jquery', 'form', 'setter','tree','commons'], function () {
        var layer = layui.layer;
        var $ = layui.$;
        var form = layui.form;
        setter = layui.setter;
        var tree=layui.tree;
        commons=layui.commons;
        form.render();
        var index = parent.layer.getFrameIndex(window.name);
        $('#return').click(function () {
            parent.layer.close(index);
        });
        $(document).on('mouseenter', '.layui-tree li a cite', function () {
            $(".layui-tree li a cite").each(function (i) {
                $(this).removeClass("colorSwitch fontColor");
            });
            $(this).addClass("colorSwitch fontColor");
        }).mouseout(function () {
            $(this).removeClass("colorSwitch fontColor");
        });
        var categoryId;
        $.ajax({
            type: 'post',
            url: serverPath.formPath + setter.sysLinkPath +"globalType/list",
            dataType:'json',
            data: {"catKey": "FORM_TYPE", "hasRoot": "-1", "treeType": "1"},
            success: function (result) {
                tree.render({
                    elem: "#classtree",
                    data: result.data,
                    click: function (node) {
                        var $select = $($(this)[0].elem).parents(".layui-form-select");
                        $select.removeClass("layui-form-selected").find(".layui-select-title span").html(node.data.title).end().find("input:hidden[name='selectID']").val(node.data.categoryId);
                        categoryId = node.data.categoryId;
                    }
                });

            }
        });

        $(".downpanel").on("click", ".layui-select-title", function (e) {
            $(".layui-form-select").not($(this).parents(".layui-form-select")).removeClass("layui-form-selected");
            $(this).parents(".downpanel").toggleClass("layui-form-selected");
            layui.stope(e);
        }).on("click", "dl i", function (e) {
            layui.stope(e);
        });

        form.on('submit(save)', function (data) {
            data.field.typeId= categoryId;
            $.ajax({
                url: serverPath.formPath + setter.formLinkPath +'formDef/saveCopy',
                type: 'post',
                dataType: 'json',
                data: data.field,
                success: function (result) {
                    if(!commons._filterRecord(result)){
                        layer.alert(result.msg);
                    }else{
                        layer.alert(result.msg, {skin: 'btn-class'},function () {

                            parent.layui.table.reload('customForm', {
                                page: {
                                    curr: 1
                                }
                            });
                            parent.layui.totalFilter.init('customForm');
                            commons._bulletWindow(index);
                        });
                    }
                }
            });
        });
    });

    /**
     * 根据表单名称生成表单别名
     * @param inputObj
     */
    function autoGetFormDefName(inputObj) {
        var tableDesc = $(inputObj).val();
        if ($.trim(tableDesc).length < 1) return;
        $.ajax({
            url: serverPath.formPath + setter.formLinkPath + "table/getFieldKey",
            dataType: 'json',
            data: ({fieldDesc: tableDesc}),
            success: function (obj) {
                if (commons._filterRecord(obj)) {
                    $("#formKey").val(obj.data);
                }
            }
        });
    }
</script>
<style>
    .layui-tree li {
        width: 180px;
    }

    .layui-tree li a {
        display: inline-block;
        width: 180px;
    }

    .layui-tree li a cite {
        display: inline-block;
        width: 139px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .layui-form-select .layui-input {
        width: 190px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .fontColor {
        color: #fff !important;
    }
</style>
</body>
</html>